/**
* Description: 手卫生详情
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="handRecordDetail">
    <el-card class="box-card ">
      <template #header>
        <div slot="header" class="clearfix">
          <div class="clearfixTitle">手卫生记录详情</div>
          <div class="return-info" @click="alarmShow">
            <el-icon :size="20" ><ArrowLeft /></el-icon>
           <div style="height: 20px;line-height: 20px">返回列表</div>
          </div>
        </div>
      </template>
      <div class="detailsContent">
        <h3 class="base-title">基础信息</h3>
        <ul class="dataList">
          <li>
            <p>
              记录编号:<span>{{ detailsData.washHandsRecordCode }}</span>
            </p>
          </li>
          <li>
            <p>
              手卫生类型:<span>{{ detailsData.washHandsTypeStr }}</span>
            </p>
          </li>
          <li>
            <p>
              完成状态:<span>{{
                $CONSTANTS.COMPLIANCE_STATUS_MAP[detailsData.finishFlag ? detailsData.finishFlag : 0].TITLE
              }}</span>
            </p>
          </li>
          <li>
            <p>
              得分:<span>{{ detailsData.washHandsScore }}</span>
            </p>
          </li>
          <li>
            <p>
              开始时间:<span>{{ detailsData.startTime }}</span>
            </p>
          </li>
          <li>
            <p>
              结束时间:<span>{{ detailsData.endTime }}</span>
            </p>
          </li>
          <li>
            <p>
              手卫生时长:<span>{{ detailsData.washHandsDurationStr }}</span>
            </p>
          </li>
          <li>
            <p>
              姓名:<span>{{ detailsData.subUserName }}</span>
            </p>
          </li>
          <li>
            <div style="display: flex">
              <p style="min-width: 75px">组织架构:</p>
              <ToolTip style="width: 300px" :text="detailsData.hospitalDeptName"
                        :max-length="21" :show-line-num="1"/>
            </div>
          </li>
          <li>
            <p>
              手卫生设备:<span>{{ detailsData.deviceCode }}</span>
            </p>
          </li>
          <li>
            <div style="display: flex">
              <p style="min-width: 75px">所在层级:</p>
              <ToolTip style="width: 210px" :text="detailsData.deviceLocation"
                        :max-length="15" :show-line-num="1"/>
            </div>
          </li>
          <li>
            <div style="display: flex">
              <p style="min-width: 108px">所在区域/点位:</p>
              <ToolTip style="width: 260px" :text="detailsData.deviceRegion || detailsData.devicePosition"
                        :max-length="18" :show-line-num="1"/>
            </div>
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="box-card marginTop20" v-if="detailsData.tableData">
      <div class="detailsContent ">
        <h3 class="base-title" style="margin-right:20px">动作明细</h3>
        <el-table
          :data="detailsData.tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="key"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="stepNum"
            label="步骤序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="stepImageUrl"
            label="步骤图片"
            width="180">
            <template v-slot="scope">
              <span v-if="scope.row.level == 1">{{ scope.row.stepImagePath }}</span>
              <el-image referrerPolicy="no-referrer" style="height: 72px" v-if="scope.row.level == 2"
                        :src="scope.row.stepImageUrl" alt=""/>
            </template>
          </el-table-column>
          <el-table-column
            prop="stepName"
            label="步骤名称">
          </el-table-column>
          <el-table-column
            prop="stepStatus"
            label="状态">
            <template #default="scope">
              <img v-if="scope.row.level == 2 && actionStatus(scope.row.actionStatus)"
                   src="@/assets/handHygiene/correct.png" alt="">
              <img v-if="scope.row.level == 2 && !actionStatus(scope.row.actionStatus)"
                   src="@/assets/handHygiene/error.png" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="actionErrorDesc"
            label="错误明细">
          </el-table-column>
        </el-table>

      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  type handHygieneRecordDTO,
  getOrdinaryTypeStepDetailApi,
  getSurgeryTypeStepDetailApi,
  type handHygieneRecordDetailDTO
} from "@/api/handHygieneRecord"
import {ACTION_DETAILS_TYPE_MAP} from '@/constants/mapConstants'
import $CONSTANTS from '@/constants/globalConstants'
import {reactive} from "vue";
import ToolTip from "@/components/common/ToolTip.vue";

const emit = defineEmits(['change'])

let detailsData = reactive<handHygieneRecordDTO>({})

const init = (row: handHygieneRecordDTO) => {
  if (row.washHandsType == 2) {
    getOrdinaryTypeStepDetail(row)
  } else if (row.washHandsType == 3) {
    getSurgeryTypeStepDetail(row)
  } else {
    // detailsData = reactive<handHygieneRecordDTO>(row);
    Object.assign(detailsData, row)
  }
}

const actionStatus = ((actionStatusValue: number)  => {
  return actionStatusValue == 1 || actionStatusValue == 2 || actionStatusValue == 3
})
const getOrdinaryTypeStepDetail = async (row: handHygieneRecordDTO) => {
  let res = await getOrdinaryTypeStepDetailApi({
    id: row.id,
    washHandsType: row.washHandsType
  });
  let tableData: Array<handHygieneRecordDetailDTO> = []
  // 组装数据
  res.data.data.forEach((item, i) => {
    // 循环明细添加key字段
    item.level = 2;
    tableData.push(item);
  });
  row.tableData = tableData;
  Object.assign(detailsData, row)
}
const getSurgeryTypeStepDetail = async (row: handHygieneRecordDTO) => {
  let res = await getSurgeryTypeStepDetailApi({
    id: row.id,
    washHandsType: row.washHandsType
  });
  let data = res.data.data;
  const tableData: Array<handHygieneRecordDetailDTO> = [];
  // 组装数据
  data.forEach((item, i) => {
    // 循环明细添加key字段
    item.washHandsStepVOList && item.washHandsStepVOList.forEach((childrenItem, j) => {
      childrenItem.key = i + '-' + j;
      childrenItem.level = 2;
    });
    const obj:handHygieneRecordDetailDTO  = {
      key: i + '',
      stepStatus: '',
      stepName: '',
      stepImagePath: `时长：${item.washHandsDuration}s`,
      stepErrMsg: '',
      level: 1,
      children: item.washHandsStepVOList,
      stepNum: ACTION_DETAILS_TYPE_MAP[item.actionStage].TITLE,
      actionStage: 0
    };
    tableData.push(obj);
  });
  row.tableData = tableData;
  Object.assign(detailsData, row)
}

const alarmShow = () => {
  emit('change', true)
}

defineExpose({
  init
});

</script>

<style lang="scss" scoped>
.is-leaf {
  background: #f8faff !important;
  width: 56px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #303133;
}

.el-table__row--level-0 {
  background: #f6f6f9;
  height: 42px;

  .el-table__cell {
    border-top: 10px solid #FFF;
  }
}

.has-gutter th {
  color: #252631 !important;
}

.el-icon-arrow-right:before {
  content: "\e791";
  color: #317CEE;
  font-size: 18px;
}

.handRecordDetail {
  color: #303133;

  .detailsContent {
    font-size: 14px;
    .base-title {
      font-size: 18px;
      margin-bottom: 20px;
      padding-left: 10px;
      border-left: 4px solid #317cee;
    }
  }

  .clearfix {
    .clearfixTitle {
      color: $text-theme-color;
      font-size: 18px;
      font-weight: 700;
      margin: 0px 0 16px 0px;
    }
    .return-info {
      width: 100px;
      font-size: 14px;
      color: $theme-color;
      cursor: pointer;
      display: flex;
      margin-top: 20px;
    }
  }

  .box-card {
    width: 100%;

    .detailsContent {
      .operation {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
          background-color: #317cee;

          span {
            color: #fff;
          }
        }
      }

      .dataList {
        display: flex;
        flex-wrap: wrap;
        // margin-top: 20px;
      }

      .dataList li {
        max-width: 50%;
        min-width: 30%;
        height: 35px;
        // border: 1px solid slategray;
        line-height: 35px;

        .green {
          color: #4ee8cd;
        }

        .red {
          color: #f56c6c;
        }
      }

      .dataList li p {
        padding-left: 15px;
        margin-right: 20px;
        color: #5a6175;
        font-size: 14px;
      }

      .dataList li p span {
        margin-left: 20px;
        color: #303133;
        font-size: 15px;
      }
    }

    .height100 {
      height: 50vh;
    }

  }

  .marginTop20 {
    margin-top: 20px;
  }

}
</style>